<template>
	<view class="content">
		<!-- 李峰视频 -->
		<!-- 遮罩 -->
		<view class="mark1" v-if="isLandScape">
			<image src="../../static/tip-heng2.png" class="tip-heng"></image>
		</view>
		
		<view class="tian-piao-box" v-if="piaoShow">
			<view class="tian-piao animated fadeIn" :style="{'height':keyongH+'px','width':981*keyongH/600+'px'}" >
				<input type="text" v-model="name" class="name-class" />
				<input type="text" v-model="wwid" class="wwid-class" />
				<view class="saveInfo" @click="surePiao" :style="isLandScape?{}:{'width':'506px','height':'64px','margin-left':'-258px','bottom': '-6px'}">
					
				</view>
			</view>
			
		</view>
		<view class="tian-piao-box1" v-show="shipino">
			<video src="https://7463-tcb-5s1jabgw702434-6drh810d420cd-1304347316.tcb.qcloud.la/李峰1.mp4" controls  id="shipin" :style="{'height':keyongH+'px','width':640*keyongH/368+'px'}"></video>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isLandScape: true,
				name: '',
				wwid: '',
				piaoShow:false,
				keyongH: '',
				isVideo:true,
				shipino:false
			}
		},
		onReady: function (res) {
		        this.videoContext = uni.createVideoContext('shipin')
		    },
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					console.log(res.windowHeight)
					if (res.windowHeight < res.windowWidth) {
						this.isLandScape = false
						this.piaoShow = true
						this.keyongH = res.windowHeight
					} else {
						this.isLandScape = true
						console.log('可使用窗口高度', res.windowHeight)
						this.keyongH = res.windowHeight
			
					}
				}
			})
			window.addEventListener("resize", (event) => {
				uni.getSystemInfo({
					success: (res) => {
						console.log(res.windowHeight)
						if (res.windowHeight < res.windowWidth) {
							this.isLandScape = false
							this.piaoShow = true
							this.keyongH = res.windowHeight
						} else {
							this.isLandScape = true
							this.piaoShow = false
							console.log('可使用窗口高度', res.windowHeight)
							this.keyongH = res.windowHeight
							// this.shipinShow = false
							// this.$refs.shipin.pause()
						}
					}
				})
			}, false);
		},
		methods: {
			surePiao() {
				console.log(1111)
				if (this.name!=='' && this.wwid!=='') {
					uniCloud.callFunction({
						name:'login',
						data:{name:this.name,wwid:Number(this.wwid)}
					}).then((res)=>{
						console.log(res)
						// debugger
						if (res.result.total>0) {
							this.piaoShow = false
							this.shipino= true
							this.videoContext.play()
						} else{
							uni.showToast({
								title:'用户信息错误',
								icon:'error',
								mask:true
							})
							this.name = ''
							this.wwid = ''
						}
					})
					
					
					
				} else{
					uni.showToast({
						title:'请填写完整个人信息',
						icon:'none',
						mask:true
					})
				}
			},
		}
	}
</script>

<style>
	.mark1 {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: #000;
		/* background: url(../../static/tip-shu.jpg) no-repeat center center;
		background-size: 100% 100%; */
		z-index: 999;
		display: flex;
		justify-content: center;
		align-items: center;
	}
.tian-piao-box {
		position: absolute;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, .8);
		z-index: 100;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
.tian-piao-box1 {
		position: absolute;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, .8);
		z-index: 99;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	.tian-piao {
		/* width: 818rpx;
		height: 500rpx; */
		background: url(../../static/che/chepiao1.png) no-repeat center center;
		background-size: 100% 100%;
		border-radius: 26rpx;
		overflow: hidden;
		position: relative;
		transform: scale(0.9) !important;
	}
	.name-class {
		width: 22.8%;
		height: 7%;
		position: absolute;
		left: 38.3%;
		top: 70%;
		font-size: 18px;
		color: #555555;
		/* border: 1px solid #007AFF; */
	}
	
	.wwid-class {
		width: 22.8%;
		height: 7%;
		position: absolute;
		left: 76.5%;
		top: 70%;
		font-size: 18px;
		color: #555555;
	}
	.saveInfo{
		width: 468rpx;
		height: 60rpx;
		background: url(../../static/che/infoButton.png) no-repeat center center;
		background-size: 100% auto;
		position: absolute;
		bottom: -6rpx;
		left: 50%;
		margin-left: -234rpx;
		transform: scale(0.7);
		opacity: 0;
	}
</style>
